import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Form } from './components';
import { Image } from 'components/atoms';
import { LearnMoreLink } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { HeroShaped } from 'components/organisms';
import { useHistory, useParams } from 'react-router-dom/cjs/react-router-dom.min';
import { callGetNewsApi } from 'utils/networking';
import { useDispatch } from 'react-redux';
import { setProfile } from 'redux/actions/AuthActions';

const useStyles = makeStyles(theme => ({
    root: {
        '& .hero-shaped': {
            borderBottom: 0,
        },
        '& .hero-shaped__wrapper': {
            [theme.breakpoints.up('md')]: {
                minHeight: `calc(100vh - ${theme.mixins.toolbar['@media (min-width:600px)'].minHeight}px)`,
            },
        },
    },
    formContainer: {
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        [theme.breakpoints.down('sm')]: {
            maxWidth: 500,
            margin: `0 auto`,
        },
    },
    image: {
        objectFit: 'cover',
    },
}));

const Signin = () => {
    const classes = useStyles();
    let { type, id } = useParams();
    const dispatch = useDispatch();
    let history = useHistory();
    const [signInImg, setSingInImg] = useState("")

    useEffect(() => {
        callGetNewsApi('user/verify_token', dispatch, (data) => {
            console.log('data666', data);
            if (data && data.id) {
                dispatch(setProfile(data));
                const token = localStorage.getItem('token');
                if (type && id) {
                    if (type === 'playlist') {
                        window.location.replace(`${process.env.REACT_APP_SERVER_URL}/player/playlist/${id}/${token}`);
                        return;
                    }
                    else if (type === 'album') {
                        window.location.replace(`${process.env.REACT_APP_SERVER_URL}/player/album/${id}/${token}`);
                        return;
                    }
                    else if (type === 'song') {
                        window.location.replace(`${process.env.REACT_APP_SERVER_URL}/player/play/${id}/${token}`);
                        return;
                    }
                    else if (type === 'user') {
                        window.location.replace(`${process.env.REACT_APP_SERVER_URL}/player/user/${id}/${token}`);
                        return;
                    }
                    else if (type === 'episode') {
                        window.location.replace(`${process.env.REACT_APP_SERVER_URL}/player/episode/${id}/${token}`);
                        return;
                    }
                    else if (type === 'season') {
                        window.location.replace(`${process.env.REACT_APP_SERVER_URL}/player/season/${id}/${token}`);
                        return;
                    }
                }
                else if (type === 'playlist') {
                    window.location.replace(`${process.env.REACT_APP_SERVER_URL}/playlist/index/${token}`);
                    return;
                }

                history.replace("")
            }
        }, null, false);

        callGetNewsApi('cover/login_image', dispatch, (data) => {
            setSingInImg(data.login_image)
        })
    }, [])

    return (
        <div className={classes.root}>
            <HeroShaped
                leftSide={
                    <div className={classes.formContainer}>
                        <SectionHeader
                            title="Sign in"
                            subtitle={
                                <span>
                                    Don’t have an account?{' '}
                                    <LearnMoreLink
                                        title="Sign up."
                                        href="/signup"
                                        typographyProps={{ variant: 'h6' }}
                                    />
                                </span>
                            }
                            titleProps={{
                                variant: 'h3',
                            }}
                        />
                        <Form
                            type={type}
                            id={id} />
                    </div>
                }
                rightSide={
                    <Image
                        src={signInImg}
                        // src={signInImg ? signInImg : "https://assets.maccarianagency.com/the-front/photos/account/cover-1.png"}
                        className={classes.image}
                        lazy={false}
                    />
                }
            />
        </div>
    );
};

export default Signin;
